<template>
  <div class="y-btnList">
    <el-button
      :size="size(btn)"
      :icon="btn.icon"
      :disabled="readOnly || btn.disabled"
      :circle="btn.circle"
      :round="btn.round || false"
      :plain="btn.plain || false"
      :loading="btn.loading || false"
      :type="btn.type"
      v-for="(btn, btni) of list"
      :key="btni"
      @click="clickBtn(btn, btni)"
      >{{ btn.label }}</el-button
    >
  </div>
</template>

<script>
export default {
  name: "y-btnList",
  props: {
    btnConfig: {
      type: Object,
      default: () => {},
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    list() {
      return this.btnConfig.list;
    },
    size() {
      return (btn) => {
        return btn.size || Vue.$config.size;
      };
    },
  },
  methods: {
    clickBtn(btn, btni) {
      if (btn.callback) {
        btn.callback({
          $model: btn,
          $index: btni,
        });
      } else {
        this.$emit(btn.clickName, {
          $model: btn,
          $index: btni,
        });
      }
    },
  },
};
</script>